<section class="content-header">
  <h1>
    Challenges
    <small>{{ ctrl.challenges.length }} challenges</small>
  </h1>
  <ol class="breadcrumb">
    <li><a ui-sref="manage"><i class="fa fa-wrench"></i> Manage</a></li>
    <li class="active">Challenges</li>
  </ol>
</section>

<section class="content">
  <div class="box box-primary">
    <div class="box-header with-border">
      <h3 class="box-title">All Challenges</h3>
      <div class="box-tools pull-right">
        <a class="btn btn-box-tool" ui-sref="manage_challenge_create">
          <i class="fa fa-plus"></i> Create
        </a>
      </div>
    </div>
    <div class="box-footer" ng-show="ctrl.challenges.length == 0">
      No challenges
    </div>
    <div class="box-body no-padding" ng-show="ctrl.challenges.length > 0">
      <div class="table-responsive">
        <table class="table table-hover table-striped">
          <tbody>
          <tr>
            <th>Name</th>
            <th style="width: 120px">Flag</th>
            <th style="width: 100px">Category</th>
            <th style="width: 90px">Difficulty</th>
          </tr>
          <tr ng-repeat="challenge in ctrl.challenges">
            <td><a ui-sref="manage_challenge_edit({id: challenge._id})">{{ challenge.name }}</a></td>
            <td>{{ challenge.flagThumb }}</td>
            <td>{{ challenge.category }}</td>
            <td>{{ challenge.difficulty }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>
